<template>
  <div class="manage">

    <el-dialog
        title="学生信息"
        :visible.sync="dialogVisible"
        width="50%">
<!--      添加学生信息表单-->
      <el-form ref="form" :rules="rules" :inline="true" :model="form" label-width="80px">
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="userNo">
          <el-input v-model="form.userNo"></el-input>
        </el-form-item>
        <el-form-item label="学院" prop="userAcademy">
          <el-select v-model="form.userAcademy" placeholder="请选择学院">
            <el-option v-for="item in AcademyData" :key="item.id"  :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="userDomain">
          <el-select v-model="form.userDomain" placeholder="请选择专业">
            <el-option v-for="item in DomainData" :key="item.id"  :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="userClass" >
          <el-input v-model="form.userClass"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!--    新增按钮-->
    <div class="manage-header">
      <el-button @click="dialogVisible=true" type="primary">
        + 新增
      </el-button>
<!--      查询-->
      <div>
        <el-input v-model="name" placeholder="请输入查找姓名" suffix-icon="el-icon-search" style="width: 200px"
                 ></el-input>
        <el-button type="primary" style="margin-left: 5px" >查询</el-button>
        <el-button type="success" >重置</el-button>
      </div>
    </div>
    <!--    数据展示-->
    <el-table :data="StudentsData"
              :header-cell-style="{background:'#6495ED',color:'white'}"
              border
    >
      <el-table-column prop="userId" label="序号" width="80">
      </el-table-column>
      <el-table-column prop="userNo" label="学号" width="150">
      </el-table-column>
      <el-table-column prop="userName" label="姓名" width="150">
      </el-table-column>
      <el-table-column prop="userAcademy" label="学院" width="300">
      </el-table-column>
      <el-table-column prop="userDomain" label="专业" width="180">
      </el-table-column>
      <el-table-column prop="userClass" label="班级" width="120"
                       :filters="[{ text:'软工211',value:'软工211'},
                       { text:'软工212',value:'软工212'},
                       { text:'软工213',value:'软工213'},
                       { text:'软工214',value:'软工214'},
                       { text:'软工215',value:'软工215'},
                       { text:'软工216',value:'软工216'}]"
                       :filter-method="filterClass">
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template v-slot="scope">
          <el-button size="small" type="success" @click="dialogVisible=true">查看</el-button>
          <el-popconfirm
              title="确定删除吗？"
              @confirm="del(scope.row.userId)"
              style="margin-left: 5px"
          >
            <el-button slot="reference" size="small" type="danger" >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
<!--    分页-->
    <div class="content-page">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>

<!--    查看详情表单-->
    <el-dialog>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名" prop="userName">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="学号" prop="userNo">
        <el-input v-model="form.userNo"></el-input>
      </el-form-item>
      <el-form-item label="学院" prop="userAcadem">
        <el-input v-model="form.userAcademy"></el-input>
      </el-form-item>
      <el-form-item label="学院" prop="userAcademy">
        <el-select v-model="form.userAcademy" placeholder="请选择学院">
          <el-option v-for="item in AcademyData" :key="item.id"  :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业" prop="userDomain">
        <el-select v-model="form.userDomain" placeholder="请选择专业">
          <el-option v-for="item in DomainData" :key="item.id"  :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="userClass">
        <el-input v-model="form.userClass"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import {getStudent,addStudent} from '../api'
export default {
  name: `Students`,
  data() {
    return {
      //是否显示弹窗，默认关闭
      dialogVisible: false,
      //新增表单信息
      form: {
        userId: '',
        userNo: '',
        userName: '',
        userAcademy: '',
        userDomain: '',
        userClass: '',
      },
      //表单的规则
      rules:{
        userName:[
            {required: true, message: '姓名不能为空', trigger: 'blur'},
        ],
        userNo: [
          {required: true, message: '学号不能为空', trigger: 'blur'},
          {min: 10, max: 10, message: '学号位数输入有误', trigger: 'blur'},
        ],
        userClass: [
          {required: true, message: '班级不能不能为空', trigger: 'blur'},
        ]
      },
      //院校
      AcademyData: [
        {
          id: 1,
          name: "软件工程学院",
        },
        {
          id: 2,
          name: "计算机科学与技术学院",
        },
        {
          id: 3,
          name: "xx学院",
        },
      ],
      //专业
      DomainData: [
        {
          id: 1,
          name: "软件工程",
        },
        {
          id: 2,
          name: "云平台",
        },
        {
          id: 3,
          name: "大数据",
        },
      ],
      //学生
      StudentsData:[
          {
            userId:1,
            userNo:1234567890,
            userName:"小明",
            userAcademy:"软件工程学院",
            userDomain: "软件工程",
            userClass:"软工211",
          },
        {
          userId:2,
          userNo:1234765089,
          userName:"小红",
          userAcademy:"软件工程学院",
          userDomain: "软件工程",
          userClass:"软工211",
        },
        {
          userId:3,
          userNo:1244467890,
          userName:"小2",
          userAcademy:"软件工程学院",
          userDomain: "软件工程",
          userClass:"软工212",
        },
          ],
      //查询
      name: '',
      ClassList:[//后续可以用一个表来装，id,name【班名】,num【人数】,teacher【班主任】
        {id:1,name:'软工211',num:33,teacher:'王二'},
        {id:2,name:'软工212',num:33,teacher:'王二'},
        {id:3,name:'软工213',num:33,teacher:'王二'},
        {id:4,name:'软工214',num:33,teacher:'王二'},
        {id:5,name:'软工215',num:33,teacher:'王二'},
        {id:6,name:'软工216',num:33,teacher:'王二'},
      ]
    }
  },
  methods: {
    //提交用户表单
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          //重新获取数据
          // this.getList()
          // addStudent(this.form).then(()=>{
          //
          // })
          //关闭弹窗
          this.$refs.form.resetFields()
          this.dialogVisible=false
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
   // 清空表单
    handleClose(){
      this.$refs.form.resetFields()
      this.dialogVisible=false
    },
    // //获取列表数据
    // getList(){
    //   getStudent().then(({data})=>{
    //     console.log(data)
    //     this.StudentsData=data.list
    //   })
    // }
    filterClass(value, row) {
      return row.userClass === value;
    },
  },

  mounted() {

  }
}
</script>

<style lang="less" scoped>
.manage-header{
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.content-page{
  text-align: center;
}
</style>